<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 20px 0;
        }
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .error { color: #dc3545; font-weight: bold; }
        .success { color: #28a745; font-weight: bold; }
        .warning { color: #ffc107; font-weight: bold; }
        .info { color: #17a2b8; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>🎥 视频播放修复测试</h1>
    
    <div class="container">
        <h2>修复说明</h2>
        <div class="test-section">
            <h3>🔧 已修复的问题：</h3>
            <ol>
                <li><strong>路径参数类型错误</strong>：将 @PathVariable Integer id 改为 String id，支持文件名和ID</li>
                <li><strong>Content-Type检测改进</strong>：添加了更完善的MIME类型检测逻辑</li>
                <li><strong>Range请求处理优化</strong>：改进了HTTP Range请求的处理</li>
                <li><strong>权限检查优化</strong>：改进了用户权限验证逻辑</li>
                <li><strong>错误处理增强</strong>：添加了更详细的错误日志和异常处理</li>
            </ol>
        </div>
    </div>

    <div class="container">
        <h2>视频播放测试</h2>
        <div class="video-container">
            <video id="testVideo" controls preload="metadata">
                <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
        <button onclick="testVideoPlayback()">开始测试</button>
        <button onclick="testAPI()">测试API</button>
        <button onclick="clearLog()">清空日志</button>
    </div>

    <div class="container">
        <h2>测试日志</h2>
        <div id="log" class="log"></div>
    </div>

    <div class="container">
        <h2>测试步骤</h2>
        <div class="test-section">
            <h3>📋 测试清单：</h3>
            <ol>
                <li>✅ 检查视频文件是否存在</li>
                <li>🔄 测试视频流API响应</li>
                <li>🔄 测试Content-Type设置</li>
                <li>🔄 测试Range请求支持</li>
                <li>🔄 测试视频播放功能</li>
                <li>🔄 测试错误处理</li>
            </ol>
        </div>
    </div>

    <script>
        const video = document.getElementById('testVideo');
        const log = document.getElementById('log');
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : 
                            type === 'success' ? 'success' : 
                            type === 'warning' ? 'warning' : 'info';
            log.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function clearLog() {
            log.innerHTML = '';
        }
        
        // 视频事件监听
        video.addEventListener('loadstart', () => {
            addLog('🔄 开始加载视频', 'info');
        });
        
        video.addEventListener('loadedmetadata', () => {
            addLog(`✅ 视频元数据加载成功 - 时长: ${video.duration}秒, 尺寸: ${video.videoWidth}x${video.videoHeight}`, 'success');
        });
        
        video.addEventListener('loadeddata', () => {
            addLog('✅ 视频数据加载完成', 'success');
        });
        
        video.addEventListener('canplay', () => {
            addLog('✅ 视频可以开始播放', 'success');
        });
        
        video.addEventListener('canplaythrough', () => {
            addLog('✅ 视频可以流畅播放', 'success');
        });
        
        video.addEventListener('error', (e) => {
            const error = video.error;
            let errorMsg = '❌ 视频播放错误: ';
            
            if (error) {
                switch (error.code) {
                    case 1:
                        errorMsg += 'MEDIA_ERR_ABORTED - 视频加载被中止';
                        break;
                    case 2:
                        errorMsg += 'MEDIA_ERR_NETWORK - 网络错误';
                        break;
                    case 3:
                        errorMsg += 'MEDIA_ERR_DECODE - 视频解码错误';
                        break;
                    case 4:
                        errorMsg += 'MEDIA_ERR_SRC_NOT_SUPPORTED - 视频格式不支持';
                        break;
                    default:
                        errorMsg += `未知错误 (代码: ${error.code})`;
                }
            } else {
                errorMsg += '未知错误';
            }
            
            addLog(errorMsg, 'error');
            addLog(`网络状态: ${video.networkState}, 就绪状态: ${video.readyState}`, 'error');
            addLog(`视频源: ${video.src}`, 'error');
        });
        
        video.addEventListener('stalled', () => {
            addLog('⚠️ 视频加载停滞', 'warning');
        });
        
        video.addEventListener('waiting', () => {
            addLog('⏳ 视频缓冲中...', 'warning');
        });
        
        // 测试函数
        async function testAPI() {
            addLog('=== 🔍 测试视频流API ===', 'info');
            const videoId = 'd895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4';
            const streamUrl = `/api/video/stream/${videoId}`;
            
            try {
                // 测试HEAD请求
                addLog(`🔍 测试HEAD请求: ${streamUrl}`, 'info');
                const headResponse = await fetch(streamUrl, { method: 'HEAD' });
                addLog(`📊 HEAD响应状态: ${headResponse.status} ${headResponse.statusText}`, 
                       headResponse.ok ? 'success' : 'error');
                
                if (headResponse.ok) {
                    const contentType = headResponse.headers.get('Content-Type');
                    const contentLength = headResponse.headers.get('Content-Length');
                    const acceptRanges = headResponse.headers.get('Accept-Ranges');
                    
                    addLog(`📄 Content-Type: ${contentType}`, 'info');
                    addLog(`📏 Content-Length: ${contentLength}`, 'info');
                    addLog(`🎯 Accept-Ranges: ${acceptRanges}`, 'info');
                    
                    // 测试Range请求
                    addLog('🔍 测试Range请求 (0-1023)', 'info');
                    const rangeResponse = await fetch(streamUrl, {
                        headers: { 'Range': 'bytes=0-1023' }
                    });
                    addLog(`📊 Range响应状态: ${rangeResponse.status} ${rangeResponse.statusText}`, 
                           rangeResponse.status === 206 ? 'success' : 'warning');
                    
                    if (rangeResponse.status === 206) {
                        const contentRange = rangeResponse.headers.get('Content-Range');
                        addLog(`📏 Content-Range: ${contentRange}`, 'info');
                    }
                }
                
            } catch (error) {
                addLog(`❌ API测试失败: ${error.message}`, 'error');
            }
        }
        
        function testVideoPlayback() {
            addLog('=== 🎬 开始视频播放测试 ===', 'info');
            const videoId = 'd895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4';
            const streamUrl = `/api/video/stream/${videoId}`;
            
            addLog(`🎯 设置视频源: ${streamUrl}`, 'info');
            video.src = streamUrl;
            video.load();
        }
        
        // 页面加载时自动开始测试
        window.addEventListener('load', () => {
            addLog('=== 🚀 视频修复测试工具启动 ===', 'info');
            addLog(`🌐 浏览器信息: ${navigator.userAgent}`, 'info');
            addLog(`⏰ 当前时间: ${new Date().toLocaleString()}`, 'info');
            addLog('📋 请点击"开始测试"按钮开始测试视频播放功能', 'info');
        });
    </script>
</body>
</html>
